<template>
    <el-row :gutter="24" class="menu-page pa-6 fill-height">
        <el-col :span="8" class="fill-height">
            <el-card class="fill-height menu-tree" shadow="never">
                <template #header>
                    <div class="d-flex align-center justify-space-between">
                        <div>菜单树</div>
                        <el-space>
                            <el-button link size="small" type="primary" @click="menuApi?.onCreate?.()">创建</el-button>
                        </el-space>
                    </div>
                </template>
                <el-tree
                        ref="menuTreeRef"
                        :data="menuApi?.tableState?.dataSource"
                        :expand-on-click-node="false"
                        :props="{label:'name'}"
                        highlight-current
                        node-key="id"
                        @node-click="onNodeClick"
                >
                    <template #default="{ node, data }">
                        <el-dropdown trigger="contextmenu">
                            <span>{{ node.label }}</span>
                            <template #dropdown>
                                <el-dropdown-menu>

                                    <el-dropdown-item class="d-flex align-center" @click="onNodeClick(data)">
                                        <el-icon>
                                            <EditIcon/>
                                        </el-icon>
                                        <div>编辑</div>
                                    </el-dropdown-item>

                                    <el-dropdown-item class="d-flex align-center" @click="onCreateChildren(data)">
                                        <el-icon>
                                            <Plus/>
                                        </el-icon>
                                        <div>创建子项</div>
                                    </el-dropdown-item>

                                    <el-dropdown-item class="d-flex align-center" divided @click="onDelete(data)">
                                        <el-icon>
                                            <Delete/>
                                        </el-icon>
                                        <div>删除</div>
                                    </el-dropdown-item>

                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                </el-tree>
            </el-card>
        </el-col>
        <el-col :span="16" class="fill-height">
            <el-card class="fill-height menu-tree" shadow="never">
                <template #header>
                    <div class="d-flex align-center justify-space-between" style="height: 24px">
                        <div>编辑</div>
                        <i-xyz-transition right>
                            <el-button v-if="active" link size="small" type="danger" @click="menuApi?.onDelete?.(<string>active?.id)">删除</el-button>
                        </i-xyz-transition>
                    </div>
                </template>
                <i-xyz-transition :up="'1'" appear mode="out-in">
                    <Edit v-if="active" :key="active.id" :api="menuApi"/>
                    <div
                            v-else
                            class="d-flex flex-column">
                        <el-alert
                                :closable="false"
                                type="success"
                        >
                            <template #title>
                                <span>编辑菜单区域</span>
                            </template>
                            <div>点击左侧菜单进行编辑</div>
                        </el-alert>
                    </div>
                </i-xyz-transition>
            </el-card>
        </el-col>
        <Create :api="menuApi"/>

    </el-row>

</template>

<script lang="ts" setup>
import {MenuApi} from "~/api/system/menu/menu.api";
import {onMounted, ref} from "vue";
import Edit from "~/views/config/menu/Edit.vue";
import IXyzTransition from "~/icesoft/components/transitions/IXyzTransition.vue";
import {Menu} from "~/api/system/menu/types";
import Create from "~/views/config/menu/Create.vue";
import {Delete, Edit as EditIcon, Plus} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";

const menuApi = new MenuApi();
const active = ref<Menu | null>(null);
const menuTreeRef = ref();

function onDelete(data: Menu) {
    if (data.children && data.children.length > 0) {
        ElMessage.error("请先删除子项");
        return false;
    }
    menuApi?.onDelete?.(data.id);
}

function onCreateChildren(data: Menu) {
    menuApi.onCreate();
    menuApi.createState.form.pid = data.id;
    menuApi.createState.form.sort = (data.children && data.children.length > 0) ? (data.children[data.children.length - 1].sort + 1) : 1;
}

function onNodeClick(node: any) {
    if (active.value?.id == node.id) {
        active.value = null;
        menuTreeRef.value.setCurrentKey();
    } else {
        active.value = node;
    }
    menuApi.onEdit(node.id);
}

onMounted(() => {
    menuApi.tableState.filterParams.pid = "0";
    menuApi.tableState.pagination.pageSize = 500;
    menuApi.onListPage();
});

</script>

<style lang="scss" scoped>
.menu-page {
  .menu-tree {
    :deep(.el-card__body) {
      overflow-y: auto;
      height: calc(100% - 56px);
    }
  }
}
</style>
